<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
    <title>Modern an Admin Panel Category Flat Bootstarp Resposive Website Template | Compose :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="../css/style.css" rel='stylesheet' type='text/css'/>
    <link href="../css/font-awesome.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../js/jquery.min.js"></script>
    <!---//webfonts--->
    <!-- Bootstrap Core JavaScript -->
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="top1 navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Modern</a>
        </div>
        <!-- /.navbar-header -->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
                        class="fa fa-comments-o"></i><span class="badge">4</span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header">
                        <strong>Messages</strong>
                        <div class="progress thin">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/1.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                            <span class="label label-info">NEW</span>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/2.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                            <span class="label label-info">NEW</span>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/3.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/4.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/5.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="avatar">
                        <a href="#">
                            <img src="../images/pic1.png" alt=""/>
                            <div>New message</div>
                            <small>1 minute ago</small>
                        </a>
                    </li>
                    <li class="dropdown-menu-footer text-center">
                        <a href="#">View all messages</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown"><img src="../images/1.png" alt=""/><span
                        class="badge">9</span></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-menu-header text-center">
                        <strong>Account</strong>
                    </li>
                    <li class="m_2"><a href="#"><i class="fa fa-bell-o"></i> Updates <span
                            class="label label-info">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-envelope-o"></i> Messages <span
                            class="label label-success">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-tasks"></i> Tasks <span
                            class="label label-danger">42</span></a></li>
                    <li><a href="#"><i class="fa fa-comments"></i> Comments <span class="label label-warning">42</span></a>
                    </li>
                    <li class="dropdown-menu-header text-center">
                        <strong>Settings</strong>
                    </li>
                    <li class="m_2"><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-wrench"></i> Settings</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-usd"></i> Payments <span
                            class="label label-default">42</span></a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-file"></i> Projects <span
                            class="label label-primary">42</span></a></li>
                    <li class="divider"></li>
                    <li class="m_2"><a href="#"><i class="fa fa-shield"></i> Lock Profile</a></li>
                    <li class="m_2"><a href="#"><i class="fa fa-lock"></i> Logout</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right">
            <input type="text" class="form-control" value="Search..." onFocus="this.value = '';"
                   onBlur="if (this.value == '') {this.value = 'Search...';}">
        </form>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw nav_icon"></i>Dashboard</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-laptop nav_icon"></i>Layouts<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="grids.html">Grid System</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-indent nav_icon"></i>Menu Levels<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="graphs.html">Graphs</a>
                            </li>
                            <li>
                                <a href="typography.html">Typography</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope nav_icon"></i>Mailbox<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="inbox.html">Inbox</a>
                            </li>
                            <li>
                                <a href="compose.html">Compose email</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="widgets.html"><i class="fa fa-flask nav_icon"></i>Widgets</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-check-square-o nav_icon"></i>Forms<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="forms.html">Basic Forms</a>
                            </li>
                            <li>
                                <a href="validation.html">Validation</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-table nav_icon"></i>Tables<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="basic_tables.html">Basic Tables</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sitemap fa-fw nav_icon"></i>Css<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="media.html">Media</a>
                            </li>
                            <li>
                                <a href="login.html">Login</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <div id="page-wrapper">
        <div class="graphs">
            <div class="xs">
                <h3>Compose</h3>
                <div class="col-md-4 email-list1">
                    <ul class="collection">
                        <li class="collection-item avatar email-unread">
                            <i class="fa fa-users icon_1"></i>
                            <div class="avatar_left">
                                <span class="email-title">Social</span>
                                <p class="truncate grey-text ultra-small">Lorem Ipsum is simply dummy text of.</p>
                            </div>
                            <a href="#!" class="secondary-content"><span class="new badge blue">4</span></a>
                            <div class="clearfix"></div>
                        </li>
                        <li class="collection-item avatar email-unread">
                            <i class="fa fa-exclamation-circle icon_2"></i>
                            <div class="avatar_left">
                                <span class="email-title">Updates</span>
                                <p class="truncate grey-text ultra-small">It is a long established fact that a
                                    reader.</p>
                            </div>
                            <a href="#!" class="secondary-content"><span class="new badge red">4</span></a>
                            <div class="clearfix"></div>
                        </li>
                        <li class="collection-item avatar email-unread">
                            <i class="fa fa-tag icon_3"></i>
                            <div class="avatar_left">
                                <span class="email-title">Promotions</span>
                                <p class="truncate grey-text ultra-small">There are many variations of passages.</p>
                            </div>
                            <a href="#!" class="secondary-content"><span class="new badge blue1">4</span></a>
                            <div class="clearfix"></div>
                        </li>
                        <li class="collection-item avatar email-unread">
                            <i class="icon_4">G</i>
                            <div class="avatar_left">
                                <span class="email-title">Gmail</span>
                                <p class="truncate grey-text ultra-small">Sed ut perspiciatis unde omnis iste.</p>
                            </div>
                            <a href="#!" class="secondary-content"><span
                                    class="blue-text ultra-small">2:15 pm</span></a>
                            <div class="clearfix"></div>
                        </li>
                        <li class="collection-item avatar email-unread">
                            <i class="icon_4 icon_5">F</i>
                            <div class="avatar_left">
                                <span class="email-title">Facebook</span>
                                <p class="truncate grey-text ultra-small">But I must explain to you how.</p>
                            </div>
                            <a href="#!" class="secondary-content"><span
                                    class="blue-text ultra-small">2:15 pm</span></a>
                            <div class="clearfix"></div>
                        </li>
                        <li class="collection-item avatar email-unread email_last">
                            <i class="icon_4 icon_6">T</i>
                            <div class="avatar_left">
                                <span class="email-title">Twitter</span>
                                <p class="truncate grey-text ultra-small">At vero eos et accusamus et iusto odio.</p>
                            </div>
                            <a href="#!" class="secondary-content"><span
                                    class="blue-text ultra-small">2:15 pm</span></a>
                            <div class="clearfix"></div>
                        </li>
                    </ul>
                    <div class="content-box  mrg15B">
                        <div class="content-box-wrapper text-center">
                            <h4 class="content-box-header">
                                Chat
                                <small>(Online friends)</small>
                            </h4>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/1.png" alt="">
                                <div class="small-badge bg-red"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/2.png" alt="">
                                <div class="small-badge bg-orange"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/3.png" alt="">
                                <div class="small-badge bg-red"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/4.png" alt="">
                                <div class="small-badge bg-green1"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/5.png" alt="">
                                <div class="small-badge bg-orange"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/1.png" alt="">
                                <div class="small-badge bg-red"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/2.png" alt="">
                                <div class="small-badge bg-green1"></div>
                            </div>
                            <div class="status-badge mrg10A">
                                <img class="img-circle" width="40" src="../images/3.png" alt="">
                                <div class="small-badge bg-orange"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 inbox_right">
                    <div class="Compose-Message">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                Compose New Message
                            </div>
                            <div class="panel-body">
                                <div class="alert alert-info">
                                    Please fill details to send a new message
                                </div>
                                <hr>
                                <label>Enter Recipient Name : </label>
                                <input type="text" class="form-control1 control3">
                                <label>Enter Subject : </label>
                                <input type="text" class="form-control1 control3">
                                <label>Enter Message : </label>
                                <textarea rows="6" class="form-control1 control2"></textarea>
                                <hr>
                                <a href="#" class="btn btn-warning btn-warng1"><span
                                        class="glyphicon glyphicon-envelope tag_02"></span> Send Message </a>&nbsp;
                                <a href="#" class="btn btn-success btn-warng1"><span
                                        class="glyphicon glyphicon-tags tag_01"></span> Save To Drafts </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="copy_layout">
                <p>Copyright © 2015 Modern. All Rights Reserved | Design by <a href="http://www.mycodes.net/"
                                                                               target="_blank">源码之家</a></p>
            </div>
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Nav CSS -->
<link href="../css/custom.css" rel="stylesheet">
<!-- Metis Menu Plugin JavaScript -->
<script src="../js/metisMenu.min.js"></script>
<script src="../js/custom.js"></script>
</body>
</html>
